@charset "utf-8";
/* CSS Document */

.media{ display:block; position:relative; border:5px solid #f3f3f3; vertical-align:top;}
.media__image{ display:block; width:100%;}
.media__body{ background:rgba(0, 0, 0, 0.7); position:absolute; bottom:0; left:0; top:0; right:0; overflow:hidden; opacity:0; padding:3.75em 3em; color:white; font-size:1em; text-align:center; -webkit-transition:0.6s; transition:0.6s;}
.media__body:hover{ opacity:1;}
.media__body:after,
.media__body:before{ border:1px solid rgba(255, 255, 255, 1); content:''; opacity:0; position:absolute; bottom:1em; left:1em; right:1em; top:1em; -webkit-transform:scale(1.5); transform:scale(1.5); -webkit-transition:0.6s 0.2s; transition:0.6s 0.2s;}
.media__body:before{ border-bottom:none; border-top:none; left:2em; right:2em;}
.media__body:after{ border-left:none; border-right:none; bottom:2em; top:2em;}
.media__body:hover:after,
.media__body:hover:before{ -webkit-transform:scale(1); transform:scale(1); opacity:1;}
.media__body h2{ font-size:18px; font-weight:normal; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.media:nth-child(2) .media__body{ background:rgba(146, 41, 185, 0.7);}
.media:nth-child(3) .media__body{ background:rgba(185, 41, 128, 0.7);}
.media:nth-child(4) .media__body{ background:rgba(185, 50, 41, 0.7);}
.media:nth-child(5) .media__body{ background:rgba(185, 146, 41, 0.7);}
.media:nth-child(6) .media__body{ background:rgba(128, 185, 41, 0.7);}

@media only screen and (max-width:768px){
.case_right li .media:hover p{ display:block;}
.media__body{ display:none;}	
}